const li = document.querySelectorAll('.tab li')
const la = document.querySelectorAll('.la')
li.forEach((el) => {
  el.addEventListener('click', function (e) {
    console.log(el)
    //   if (e.target.tagName !== "LI") return
    const old = document.querySelector('.color') // 有特殊样式的元素
    old && old.classList.remove('color') //没有就不清除,有就清除
    e.target.classList.add('color')
  })
})
//创建项目
const chuangjian = document.querySelector('.chuangjian')
const xialakuang1 = document.querySelectorAll('.xialakuang1')
let flag1 = true
chuangjian.addEventListener('click', function () {
  la.forEach((el, i) => {
    el.style.display = 'none'
  })
  if (flag1) {
    xialakuang1.forEach((el, i) => {
      el.style.display = 'block'
    })
    flag1 = false
  } else {
    xialakuang1.forEach((el, i) => {
      el.style.display = 'none'
    })
    flag1 = true
  }
})

//我的项目
const item = document.querySelector('.item')
const xialakuang2 = document.querySelectorAll('.xialakuang2')
let flag2 = true
item.addEventListener('click', function () {
  la.forEach((el, i) => {
    el.style.display = 'none'
  })
  if (flag2) {
    xialakuang2.forEach((el, i) => {
      el.style.display = 'block'
    })
    flag2 = false
  } else {
    xialakuang2.forEach((el, i) => {
      el.style.display = 'none'
    })
    flag2 = true
  }
})
//我的任务
const renwu = document.querySelector('.renwu')
const xialakuang3 = document.querySelectorAll('.xialakuang3')
let flag3 = true
renwu.addEventListener('click', function () {
  la.forEach((el, i) => {
    el.style.display = 'none'
  })
  if (flag3) {
    xialakuang3.forEach((el, i) => {
      el.style.display = 'block'
    })
    flag3 = false
  } else {
    xialakuang3.forEach((el, i) => {
      el.style.display = 'none'
    })
    flag3 = true
  }
})
//报表管理
const baobiao = document.querySelector('.baobiao')
const xialakuang4 = document.querySelectorAll('.xialakuang4')
let flag4 = true
baobiao.addEventListener('click', function () {
  la.forEach((el, i) => {
    el.style.display = 'none'
  })
  if (flag4) {
    xialakuang4.forEach((el, i) => {
      el.style.display = 'block'
    })
    flag4 = false
  } else {
    xialakuang4.forEach((el, i) => {
      el.style.display = 'none'
    })
    flag4 = true
  }
})
//系统设置
const xitong = document.querySelector('.xitong')
const xialakuang5 = document.querySelectorAll('.xialakuang5')
let flag5 = true
xitong.addEventListener('click', function () {
  la.forEach((el, i) => {
    el.style.display = 'none'
  })
  if (flag5) {
    xialakuang5.forEach((el, i) => {
      el.style.display = 'block'
    })
    flag5 = false
  } else {
    xialakuang5.forEach((el, i) => {
      el.style.display = 'none'
    })
    flag5 = true
  }
})
//添加任务按钮

const tianjia = document.querySelector('.bd_header .bd_left .tianjia')
const tanbox = document.querySelector('.tanbox')
const form = document.querySelector('.tanbox form')
const data = new FormData(form)
tianjia.addEventListener('click', function () {
  tanbox.style.display = 'block'
  form.reset()
  document.querySelector('.tanbox .title').innerHTML = '添加任务'
})

document.querySelector('.quxiao').addEventListener('click', function () {
  tanbox.style.display = 'none'
})

//分页器----------------------------------------------------
//分页器----------------------------------------------------
//分页器----------------------------------------------------
//分页器----------------------------------------------------
//分页器----------------------------------------------------
//分页器----------------------------------------------------

let selected = null
let addis = true

const refresh = (page = 1, limit = 5) => {
  axios(`http://m10.ctymc.cn:24048/Task?_page=${page}&_limit=${limit}`).then((res) => {
    // console.log(res)
    // console.log(res.data)
    // console.log(res.data[0].task_leader)
    const count = parseInt(res.headers['x-total-count'])
    const pagecount = Math.ceil(count / limit)

    document.querySelector('.fenye').innerHTML = ''
    for (let i = 1; i <= pagecount; i++) {
      document.querySelector('.fenye').innerHTML += `
       <li class="${i === page ? 'active' : ''}">${i}</li>
        `
    }
    document.querySelectorAll('.fenye li').forEach((item, key) => {
      item.onclick = () => {
        //   console.log(key + 1)
        refresh(key + 1)
      }
    })

    const arr = res.data.map((el, i) => {
      return `
      <tr class="tou">
                    <td>
                      <input type="checkbox" />
                    </td>
                    <td>${el.task_id}</td>
                    <td>${el.task_name}</td>
                    <td>${el.task_leader}</td>
                    <td>${el.status === 1 ? '未完成' : '' || el.status === 2 ? '已完成' : '' || el.status === 3 ? '已延期' : ''}</td>
                    <td>${el.start_time}</td>
                    <td>${el.end_time}</td>
                    <td>${el.create_time}</td>
                    <td>${el.update_time}</td>
                    <td>
                      <a href="#" class="edit">编辑</a> |
                      <a href="#" class="delete">删除<i class="iconfont icon-jiantou_liebiaozhankai"></i></a>
                    </td>
                  </tr>
      `
    })
    document.querySelector('.list').innerHTML = arr.join('')
    const list = res.data

    
    // 选中的框
    const time1 = document.querySelector('.bd_right .time1')
    const time2 = document.querySelector('.bd_right .time2')
    const time3 = document.querySelector('.bd_right .time3')
    const kl = document.querySelectorAll('.bd_right .kl')

    //全部
    time1.addEventListener('click', function () {
      kl.forEach((el, i) => {
        el.classList.remove('kpl')
      })
      const old = document.querySelector('.bd_right .kpl')
      old && old.classList.remove('kpl')
      time1.classList.add('kpl')
    })
    //已延期
    time2.addEventListener('click', function () {
      kl.forEach((el, i) => {
        el.classList.remove('kpl')
      })
      const old = document.querySelector('.bd_right .kpl')
      old && old.classList.remove('kpl')
      time2.classList.add('kpl')
    })
    //已完成
    time3.addEventListener('click', function () {
      kl.forEach((el, i) => {
        el.classList.remove('kpl')
      })
      const old = document.querySelector('.bd_right .kpl')
      old && old.classList.remove('kpl')
      time3.classList.add('kpl')
    })

    //删除任务
    document.querySelectorAll('.delete').forEach((el, key) => {
      const item = list[key]
      el.onclick = () => {
        console.log(item.id)
        const mk = confirm('是否进行删除？？')
        if (mk) {
          axios({
            url: `http://m10.ctymc.cn:24048/Task/${item.id}`,
            method: 'DELETE',
          })
            .then((res) => {
              refresh()
              Bianhua()
            })
            .catch((err) => {
              console.log(err)
            })
        }
      }
    })
    //编辑任务
    document.querySelectorAll('.edit').forEach((el, i) => {
      const item = res.data[i]

      el.onclick = () => {
        tanbox.style.display = 'block'
        form.reset()
        document.querySelector('.tanbox .title').innerHTML = '编辑任务信息'
        document.querySelector('[name="renwu"]').value = item.task_id
        document.querySelector('[name="name"]').value = item.task_name
        document.querySelector('[name="leader"]').value = item.task_leader
        document.querySelector('[name="zhuangtai"]').value = item.status
        document.querySelector('[name="start"]').value = item.start_time
        document.querySelector('[name="end"]').value = item.end_time
        document.querySelector('[name="create"]').value = item.create_time
        document.querySelector('[name="update"]').value = item.update_time

        selected = item.id
        addis = false
      }
    })
  })
  return {
    limit,
    page,
  }
}
refresh()

let num = refresh().limit
let num2 = refresh().page


//数据的变化
function Bianhua() {
  axios({
    url: 'http://m10.ctymc.cn:24048/Task',
  }).then((res) => {
    // console.log(res)
    const list = res.data
    let list1 = []
    for (let i = 0; i < list.length; i++) {
      if (list[i].status === 1) {
        list1.push(list[i])
      }
    }
    const one = document.querySelector('.content_hd .one')
    one.innerHTML = list1.length

    //已延期
    let list2 = []
    for (let i = 0; i < list.length; i++) {
      if (list[i].status === 3) {
        list2.push(list[i])
      }
    }
    const two = document.querySelector('.content_hd .two')
    two.innerHTML = list2.length
    // console.log(list2);

    //已完成
    let list3 = []
    for (let i = 0; i < list.length; i++) {
      if (list[i].status === 2) {
        list3.push(list[i])
      }
    }
    const three = document.querySelector('.content_hd .three')
    three.innerHTML = list3.length
  })
}
Bianhua()

//表单框
//全部按钮

const time1 = document.querySelector('.bd_right .time1')
time1.onclick = () => {
  refresh()
  Bianhua()
}

const time2 = document.querySelector('.bd_right .time2')
time2.onclick = () => {
  axios({
    url: 'http://m10.ctymc.cn:24048/Task',
    method: 'GET',
  }).then((res) => {
    const list1 = res.data
    // console.log(list1)
    //已延期
    let list2 = []
    for (let i = 0; i < list1.length; i++) {
      if (list1[i].status === 3) {
        list2.push(list1[i])
      }
    }
    const list2count = parseInt(list2.length)
    document.querySelector('.content_hd .one').innerHTML = '0'
    document.querySelector('.content_hd .two').innerHTML = list2count
    document.querySelector('.content_hd .three').innerHTML = '0'

    const time2page = Math.ceil(list2count / num)
    // console.log(time2page)
    document.querySelector('.fenye').innerHTML = ''
    for (let i = 1; i <= time2page; i++) {
      document.querySelector('.fenye').innerHTML += `
       <li class="${i === num2 ? 'active' : ''}">${i}</li>
        `
    }
    document.querySelectorAll('.fenye li').forEach((item, key) => {
      item.onclick = () => {
        //   console.log(key + 1)
        refresh(key + 1)
      }
    })

    const arr2 = list2.map((el, i) => {
      return `
      <tr class="tou">
                    <td>
                      <input type="checkbox" />
                    </td>
                    <td>${el.task_id}</td>
                    <td>${el.task_name}</td>
                    <td>${el.task_leader}</td>
                    <td>${el.status === 1 ? '未完成' : '' || el.status === 2 ? '已完成' : '' || el.status === 3 ? '已延期' : ''}</td>
                    <td>${el.start_time}</td>
                    <td>${el.end_time}</td>
                    <td>${el.create_time}</td>
                    <td>${el.update_time}</td>
                    <td>
                      <a href="#" class="edit">编辑</a> |
                      <a href="#" class="delete">删除<i class="iconfont icon-jiantou_liebiaozhankai"></i></a>
                    </td>
                  </tr>
      `
    })
    document.querySelector('.list').innerHTML = arr2.join('')
  })
}

const time3 = document.querySelector('.bd_right .time3')
time3.onclick = () => {
  // setpage(num2,num)
  axios({
    url: 'http://m10.ctymc.cn:24048/Task',
    method: 'GET',
  }).then((res) => {
    const list1 = res.data
    // console.log(list1)
    //已延期
    let list3 = []
    for (let i = 0; i < list1.length; i++) {
      if (list1[i].status === 2) {
        list3.push(list1[i])
      }
    }
    const list3count = parseInt(list3.length)
    document.querySelector('.content_hd .one').innerHTML = '0'
    document.querySelector('.content_hd .two').innerHTML = '0'
    document.querySelector('.content_hd .three').innerHTML = list3count
    const time3page = Math.ceil(list3count / num)
    // console.log(time2page)
    document.querySelector('.fenye').innerHTML = ''
    for (let i = 1; i <= time3page; i++) {
      document.querySelector('.fenye').innerHTML += `
       <li class="${i === num2 ? 'active' : ''}">${i}</li>
        `
    }
    document.querySelectorAll('.fenye li').forEach((item, key) => {
      item.onclick = () => {
        //   console.log(key + 1)
        refresh(key + 1)
      }
    })

    const arr3 = list3.map((el, i) => {
      return `
      <tr class="tou">
                    <td>
                      <input type="checkbox" />
                    </td>
                    <td>${el.task_id}</td>
                    <td>${el.task_name}</td>
                    <td>${el.task_leader}</td>
                    <td>${el.status === 1 ? '未完成' : '' || el.status === 2 ? '已完成' : '' || el.status === 3 ? '已延期' : ''}</td>
                    <td>${el.start_time}</td>
                    <td>${el.end_time}</td>
                    <td>${el.create_time}</td>
                    <td>${el.update_time}</td>
                    <td>
                      <a href="#" class="edit">编辑</a> |
                      <a href="#" class="delete">删除<i class="iconfont icon-jiantou_liebiaozhankai"></i></a>
                    </td>
                  </tr>
      `
    })
    document.querySelector('.list').innerHTML = arr3.join('')
  })
}

///新增任务

const submit = document.querySelector('.tanbox .submit')

submit.addEventListener('click', function () {
  const form = document.querySelector('.tanbox form')
  const data = new FormData(form)
  // console.log(data.get('zhuangtai'))
  if (addis) {
    axios({
      url: 'http://m10.ctymc.cn:24048/Task',
      method: 'POST',
      data: {
        task_id: data.get('renwu'),
        task_name: data.get('name'),
        status: +data.get('zhuangtai'),
        task_leader: data.get('leader'),
        member: ['项目成员', '哈哈哈', '鲍鲍', '阳阳'],
        start_time: data.get('start'),
        end_time: data.get('end'),
        create_time: data.get('create'),
        update_time: data.get('update'),
      },
    }).then((res) => {
      // console.log(res)
      refresh()
      Bianhua()
    })
  } else {
    axios({
      url: `http://m10.ctymc.cn:24048/Task/${selected}`,
      method: 'PUT',
      data: {
        task_id: data.get('renwu'),
        task_name: data.get('name'),
        status: +data.get('zhuangtai'),
        task_leader: data.get('leader'),
        member: ['项目成员', '哈哈哈', '鲍鲍', '阳阳'],
        start_time: data.get('start'),
        end_time: data.get('end'),
        create_time: data.get('create'),
        update_time: data.get('update'),
      },
    }).then((res) => {
      console.log(res)
      refresh()
    })
  }
  tanbox.style.display = 'none'
})
